/***
@文件名：drag.js
@来源：Winford.Wang|2022-06-25，16:11
@描述：拖动
***/
const drag = {
  beforeMount: function (el, data) {
    const odiv = el; // 获取当前元素
    el.onmousedown = (e) => {
      const defaultWidth = el.offsetWidth || 50 // 默认边界
      const defaultHeight = el.offsetHeight || 50 // 默认边界
      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;
      let left = '';
      let top = '';
      document.onmousemove = (e) => {
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        left = e.clientX - disX;
        top = e.clientY - disY;
        const docWidth = document.body.clientWidth// 网页可见宽
        const docHeight = document.body.clientHeight// 网页可见高
        if (top > docHeight - defaultHeight) { // 超下边界(键盘DIV长宽分别为 295px、210px)
          top = docHeight - defaultHeight
        }
        if (top < 0) { // 超上边界
          top = 0
        }
        if (left > docWidth - defaultWidth) { // 超右边界
          left = docWidth - defaultWidth
        }
        if (left < 0) { // 超左边界
          left = 0
        }
        // 绑定元素位置到positionX和positionY上面
        // 移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
}

export default drag
